<template>
	<view class="es-cell-list" :style="{marginTop:marginTop}">
		<text v-if="title" class="es-cell__section-text" :style="{marginTop:sectionTop}">{{title}}</text>
		<view class="es-cell-list__wrapper"
			:style="{
				background:background,
				width:width,
				borderRadius:borderRadius,
				boxShadow:boxShadow,
			}">
			<slot></slot>
		</view>
	</view>

</template>

<script>
	export default {
		props:{
			title:String,
			marginTop:{
				type:String,
				default:"0"
			},
			sectionTop:{
				type:String,
				default:"50rpx"
			},
			background:{
				type:String,
				default:"#FFFFFF"
			},
			width:{
				type:String,
				default:"690rpx"
			},
			boxShadow:{
				type:String,
				default:"0rpx 0rpx 25rpx 0rpx rgba(0,0,0,0.02)"
			},
			borderRadius:{
				type:String,
				default:"16rpx"
			}
		}
	}
</script>

<style scoped>
	.es-cell-list {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
	
	.es-cell__section-text{
		font-size: 24rpx;
		color: #B6B6B6;
		margin-bottom: 30rpx;
	}
	
	.es-cell-list__wrapper{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}
</style>